<template>
  <div class="cinema-list-container-page">
    <div class="header">
      <CinemaSearchFilter
        @onRegionChanged="onRegionChanged"
      ></CinemaSearchFilter>
      <SwitchCom></SwitchCom>
    </div>
    <div class="flex-box">
      <div class="flex-item" @click="handleItemClick">
        <Item></Item>
      </div>
      <div class="flex-item">
        <Item></Item>
      </div>
      <div class="flex-item">
        <Item></Item>
      </div>
      <div class="flex-item">
        <Item></Item>
      </div>
      <div class="flex-item">
        <Item></Item>
      </div>
      <div class="flex-item">
        <Item></Item>
      </div>
      <div class="flex-item">
        <Item></Item>
      </div>
      <div class="flex-item">
        <Item></Item>
      </div>
      <div class="flex-item">
        <Item></Item>
      </div>
      <div class="flex-item">
        <Item></Item>
      </div>
      <div class="flex-item">
        <Item></Item>
      </div>
      <div class="flex-item">
        <Item></Item>
      </div>
      <div class="flex-item">
        <Item></Item>
      </div>
      <div class="flex-item">
        <Item></Item>
      </div>
      <div class="flex-item">
        <Item></Item>
      </div>
      <div class="flex-item">
        <Item></Item>
      </div>
      <div class="flex-item">
        <Item></Item>
      </div>
      <div class="flex-item">
        <Item></Item>
      </div>
      <div class="flex-item">
        <Item></Item>
      </div>
    </div>
  </div>
</template>
<script setup>
import CinemaSearchFilter from "../../../components/cinema-fillter/index.vue";
import SwitchCom from "../../cinema/component/switch-com/index.vue";
import Item from "../component/item.vue";
import Taro from "@tarojs/taro";

const onRegionChanged = (e) => {
  console.log(e);
};
const handleItemClick = () => {
  Taro.navigateTo({
    url: "/pages/cinema-detail/index",
  });
};
</script>
<style lang="scss">
.cinema-list-container-page {
  background-color: #ecf2fa;
  border-radius: 30px !important;
  overflow: hidden;

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 25px;
  }
  .flex-box {
    padding: 0 25px;
    padding-bottom: 200px;
    margin-top: 30px;

    .flex-item {
    }
    .flex-item:nth-child(n + 2) {
      margin-top: 20px;
    }
  }
}
</style>
